<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="我的关注" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="bg-f7f7f7 w100" style="height: 10rpx;"></view>
		<view v-for="(item,index) in list" :key='index' class="padding-x-30 solid-bottom padding-y-24 flex align-center justify-between">
			<view class="flex align-center">
				<image :src="item.avatar" style="width: 70rpx;height: 70rpx;border-radius: 100%;"></image>
				<view class="margin-left-16">
					<view class="fs-28 color-333">{{item.name}}</view>
					<!-- <view class="fs-24 color-666">房产销售</view> -->
				</view>
			</view>
			<view class="fs-24 color-999 btn text-center" @click="cancelGz(item.member_id)">已关注</view>
			<!-- <view class="fs-24 color-999 btn text-center on">关注</view> -->
		</view>
		
		<view class="nomore" :class="loadStatus" v-if="list.length"></view>
		<empty v-if="list.length < 1"></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				q:{
					page:1
				},
				hasMore: true,
				loadStatus: '',
				list: [],
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList()
			}
		},
		methods:{
			// 推荐
			getList() {
				this.isLoading = true;
				this.$api.main_interest(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			cancelGz(id){
				this.$api.cancel_interest({member_id:id}).then(res => {
					if(res.code == 1){
						this.list = [];
						this.q.page = 1;
						this.getList()
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.on{color: $uni-color-zhuse!important;border: 1rpx solid $uni-color-zhuse!important;}
	.btn{width: 106rpx;height: 44rpx;border-radius: 50rpx;line-height: 44rpx;border: 1rpx solid #999;}
</style>
